<template>
	<div class="page flex">
        <div class="menu">
            <el-menu router class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item index="list">推送列表</el-menu-item>
                <el-menu-item index="template">模板管理</el-menu-item>
                <el-menu-item index="config">推送配置</el-menu-item>
                <el-menu-item index="add">添加推送</el-menu-item>
            </el-menu>
        </div>
		<div class="router" v-loading="false">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// api地址
				api: this.$api.ems,
				// 页面加载状态
				loading: true,
				// 菜单项
				menulist: [{
						name: "推送列表",
						path: "list"
					},
					{
						name: "模板管理",
						path: "template"
					},
					{
						name: "推送配置",
						path: "config"
					},
					{
						name: "添加推送",
						path: "add"
					}

				],
				// 推送类型
				pushTypeIndex: 0,
			};
		},
		methods: {
			// 添加推送
			clickAdd() {
				this.$router.push("/Home/push_ems_add")
			},
			// 群组管理
			clickGroup() {
				this.$router.push("/Home/push_ems_group")
			},

			// 点击设置按钮
			clickSet() {
				this.$router.push("/Home/push_ems_config")
			},
			clickMenu(index) {
				let router = this.menulist[index].path
				this.$router.push(router)
			}
		},
		mounted() {

			// 获取推送列表
			this.$axios({
				url: this.api,
				method: "get",
				params: {
					"action": "list",
					"params":{}
				}
			}).then(res => {
				this.$store.commit('addEmsTemplate', res.data.data)
			}).catch(err => {
				this.$message(err.message);
			})
		}

	};
</script>

<style scoped="scoped">

    .page{
        flex-direction: column;
        min-height: 100%;
    }

	.heade {
		width: 100%;
		box-sizing: border-box;
		height: 65px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 10px 20px;
		padding-top: 20px;
	}

	.router {
		width: 100%;
        flex: 1;
        background-color: #fff;
	}

	.menu-li {
		transition: .3s all linear;
		text-decoration: none;
		width: 120px;
		height: 50px;
		background-color: #0e60f7;
		color: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 12px;
		cursor: default;
	}

	.menu-checked {
		background-color: #11c78c;
	}
</style>
